import Taro, { Component, Config } from '@tarojs/taro'
import { Input, View } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'
import { showEmpty } from "@/utils/utils"
import { getPage } from '@/api/productApi'
import { Loading, LoadMore, GoodsOneList, CustomFive, EmptyData, GoodsFiveList } from '@/components/index'

const getSorter = i => {
  return i.value === 'asc' ? 'desc' : (i.value === 'desc' ? null : (i.value ? 'asc' : 'asc'))
}

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '商品列表'
  }

  constructor() {
    super(...arguments)
    const { params } = this.$router
    const name = params.name ? decodeURI(params.name) : ''
    if (params.cName) {
      Taro.setNavigationBarTitle({ title: params.cName })
    }
    this.state = {
      params,
      loading: true,
      type: 0,
      typeList: [
        { title: '价格', name: 'sale_price', type: 'sorter' },
        { title: '销量', name: 'sales_number', type: 'sorter' },
        { title: '推荐', name: 'isHot', type: 'hot' }
      ],
      page: 1,
      limit: 10,
      dataList: [],
      loadStatus: 'loading',
      searchInput: name,
    }
  }

  componentDidMount() {
    this.getGoodsPage()
  }

  //  监听用户上拉触底事件
  onReachBottom() {
    this.getGoodsPage()
  }

  //  切换渲染类型
  onSwitchType(type) {
    this.setState({
      type
    })
  }

  //  input 输入 change 事件
  onInput(e) {
    this.setState({
      searchInput: e.detail.value
    })
  }

  //  确定搜索
  onConfirmSearch() {
    this.setState({
      page: 1,
      loadStatus: 'loading'
    }, () => {
      this.getGoodsPage()
    })
  }

  //  点击查询条件
  onClickType(i, k) {
    const { typeList } = this.state
    if (i.type === 'sorter') {
      i.value = getSorter(i)
      typeList[k] = i
    } else if (i.type === 'hot') {
      i.value = !i.value
      typeList[k] = i
    }

    typeList.map(t => {
      if (t.type === 'sorter' && i.type === 'sorter' && t.value) {
        t.value = i.name === t.name ? t.value : null
      }
    })

    this.setState({
      page: 1,
      typeList,
      loadStatus: 'loading'
    }, () => {
      this.getGoodsPage()
    })
  }

  //  分页获取商品
  getGoodsPage() {
    const { page, limit, params, typeList, searchInput, dataList, loadStatus }: any = this.state
    const query = {
      type: 5
    }
    if (loadStatus === 'noMore') {
      return
    }
    if (searchInput) {
      query['name'] = searchInput
    }
    if (params.cId) {
      query['categoryId'] = params.cId
    }
    typeList.map(t => {
      if (t.type === 'sorter' && t.value) {
        query['orders'] = { [t.name]: t.value }
      } else if (t.type === 'hot' && t.value) {
        query[t.name] = Number(t.value)
      }
    })
    getPage({ page, limit, ...query }).then(res => {
      const { list, totalCount } = res.data
      this.setState({
        page: page + 1,
        dataList: page === 1 ? list : dataList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  render() {
    const { loading, type, typeList, searchInput, dataList, loadStatus }: any = this.state
    return (<View className='search'>
      {loading && <Loading />}
      <View className='search-scroll'>
        <View className='index-head'>
          <View className='search-box d-f a-i-c'>
            <View className='input-box d-f a-i-c'>
              <View className='bnn-icon search-icon'>&#xe65c;</View>
              <Input
                value={searchInput}
                className='search-input'
                confirmType='search'
                placeholder='点击搜索商品信息'
                placeholderClass='placeholder-input'
                onInput={this.onInput.bind(this)}
                onConfirm={this.onConfirmSearch.bind(this)} />
            </View>
            <View className='type-box'>
              {type === 1 && <View className='bnn-icon type-icon' onClick={this.onSwitchType.bind(this, 0)}>&#xe67c;</View>}
              {type === 0 && <View className='bnn-icon type-icon' onClick={this.onSwitchType.bind(this, 1)}>&#xe682;</View>}
            </View>
          </View>
          <View className='type-list d-f thin-border__b'>
            {typeList.map((item, k) => {
              return (<View key={k} className='type-item' onClick={this.onClickType.bind(this, item, k)}>
                <View className={classNames('type-name', item.value && 'active')}>{item.title}</View>
                {item.type === 'sorter' && <View className='column-sorter d-f f-d-c a-i-c'>
                  <View className={classNames('bnn-icon sort-icon sorter-up', item.value === 'asc' && 'active')}>&#xe79c;</View>
                  <View className={classNames('bnn-icon sort-icon sorter-down', item.value === 'desc' && 'active')}>&#xe79b;</View>
                </View>}
              </View>)
            })}
          </View>
        </View>
        {!!dataList.length && <View className='index-body'>
          {type === 0 && <GoodsFiveList list={dataList} />}
          {/*{type === 0 && <GoodsOneList list={dataList}/>}*/}
          {type === 1 && <CustomFive list={dataList} />}
        </View>}
        {!showEmpty(dataList, loadStatus) && <LoadMore status={loadStatus} />}
        {showEmpty(dataList, loadStatus) && <View className='list-empty'><EmptyData /></View>}
      </View>
    </View>)
  }
}
